<template>
  <div>
    <div v-if="mode === 'edit'">
      <div @click="openChoose" v-if="houseutilization.length > 0">
        {{ houseutilization }}
      </div>
      <div @click="openChoose" v-else>请选择</div>
      <!-- <el-select v-model="value1" multiple placeholder="请选择"
            @change="change"  :disabled="disabled"
            >
                <el-option
                  v-for="item in dataList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  >
                </el-option>
              </el-select> -->
    </div>
    <div v-else>
      {{ houseutilization }}
    </div>
    <!-- 弹出层 -->
    <van-popup
      v-model="show"
      position="bottom"
      @click-overlay="change"
      style="border-top-right-radius: 10px; border-top-left-radius: 10px"
    >
      <div class="btn">
        <div></div>
        <div @click="confirm" class="confirm">确定</div>
      </div>
      <van-checkbox-group v-model="result">
        <van-cell-group style="text-align: left">
          <van-cell
            v-for="(item, index) in dataList"
            clickable
            :key="item.value"
            :title="` ${item.label}`"
            @click="toggle(index, item)"
          >
            <template #right-icon>
              <van-checkbox :name="item" ref="checkboxes" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-checkbox-group>
    </van-popup>
  </div>
</template>

<script>
import datasource from "../../mixins/steps-datasource";
export default {
  name: "pm-selects",
  mixins: [datasource],
  props: {
    mode: {
      default: "edit", // 编辑模式和 edit， 展示模式 view
    },
    readonly: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      dataList: [],
      disabled: false,
      show: false,
      activeIndexList: [], //选中的label数组
      houseutilization: [], //选中的label字符串
      activeIndexListCode: [],
      houseutiliztionCode: [],
      houseutilizationCodeList: [],
      houseutilizationValue: "",
      newhouseutilizationCode: null,
      houseutilizationCode: "", // 房屋利用情况
      oldhouseutilizationCode: null,
      result: [],
    };
  },
  watch: {
    options: {
      immediate: true,
      deep: true,
      handler(val) {
        if (val && val.length) {
          this.dataList = val.map((item) => {
            return {
              value: item.value,
              label: item.label,
            };
          });
        }
      },
    },
  },
  mounted() {
    if (this.value) {
      this.houseutilization = this.value.split(",");
      if (this.mode == "view") {
        this.disabled = true;
      }
    }
  },
  computed: {},
  methods: {
    openChoose() {
      this.show = true;
    },
    confirm() {
      this.show = false;
      console.log(this.result);
      console.log(this.houseutilizationCode, this.houseutilization, "111");
      this.$emit("input", this.houseutilizationCode);
    },
    toggle(index, item) {
      this.$refs.checkboxes[index].toggle();
      this.activeIndexList.push(item.label); // 选项名字
      this.activeIndexListCode.push(item.value); // 选项code
      let arr = [];
      let arrCode = [];
      for (let i = 0; i < this.activeIndexList.length; i++) {
        if (arr.indexOf(this.activeIndexList[i]) == -1) {
          //选中的新数组里面没有相同的数据push到选中的新数组里面
          arr.push(this.activeIndexList[i]);
        } else if (arr.indexOf(this.activeIndexList[i]) > -1) {
          //选中的新数组里面有相同的数据，去掉选中的新数组里面的值,代表点击的行已被点击过，这次点击则删除选中数组里面的值
          let index = arr.indexOf(this.activeIndexList[i]);
          arr.splice(index, 1);
        }
      }
      for (let i = 0; i < this.activeIndexListCode.length; i++) {
        if (arrCode.indexOf(this.activeIndexListCode[i]) == -1) {
          //选中的新数组里面没有相同的数据push到选中的新数组里面
          arrCode.push(this.activeIndexListCode[i]);
        } else if (arrCode.indexOf(this.activeIndexListCode[i]) > -1) {
          //选中的新数组里面有相同的数据，去掉选中的新数组里面的值,代表点击的行已被点击过，这次点击则删除选中数组里面的值
          let index = arrCode.indexOf(this.activeIndexListCode[i]);
          arrCode.splice(index, 1);
        }
      }
      this.activeIndexListCode = arrCode;
      this.houseutilizationCode = this.activeIndexListCode.toString();
      this.activeIndexList = arr;
      this.houseutilization = this.activeIndexList.toString();
    },
  },
};
</script>

<style lang="scss" scoped>
.btn {
  padding: 10px 16px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
}
</style>
